<template>
  <el-container>
    <el-main>
      <el-form :model="content" label-width="80px" label-position="top" ref="content">
        <el-row>
          <el-col :span="6">
            <el-form-item label="板块" prop="section" :rules="[{required: true, message: '请选择板块', trigger: 'blur'}]">
              <el-select v-model="page.selected.section" placeholder="请选择板块" style="width: 95%">
                <el-option
                  v-for="(item, index) in page.section"
                  :key="index"
                  :label="item.section"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="page.selected.section !== null" label="子版块" prop="subSection" :rules="[{required: true, message: '请选择子板块', trigger: 'blur'}]">
              <el-select v-model="page.selected.subSection" placeholder="请选择板块" style="width: 95%">
                <el-option
                  v-for="(item, index) in page.section[page.selected.section].subSection"
                  :key="index"
                  :label="item"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发布时间" prop="date" :rules="[{required: true, message: '请选择日期', trigger: 'blur'}]">
              <el-date-picker type="date" v-model="content.date" placeholder="请选择日期" style="width: 95%"></el-date-picker>
            </el-form-item>
            <el-form-item label="内容标题" prop="title" :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
              <el-input type="text" v-model="content.title" placeholder="请输入内容标题" style="width: 95%"></el-input>
            </el-form-item>
            <el-form-item label="内容封面" prop="image" :rules="[{required: true, message: '请选择内容封面', trigger: 'blur'}]">
              <input type="hidden" v-model="content.image"/>
              <el-col>
                <el-upload
                  :disabled="!page.uploadShow"
                  name="image"
                  :multiple="false"
                  :limit="1"
                  :data="{url: content.image}"
                  :on-success="uploadAfter"
                  :action="page.uploadUrl"
                  list-type="picture-card">
                  <img :src="content.image" width="150px" height="150px" style="border-radius: 8px;"/>
                </el-upload>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="内容">
                    <div ref="toobar" class="editor-bar"></div>
                    <div ref="editor" class="editor-content"></div> 
               
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button v-if="params.id === undefined" type="primary" @click="create">创 建</el-button>
          <el-button v-if="params.id !== undefined" type="success" @click="update">修 改</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import {create, update} from "@/api/content";
import {get} from "@/api/section";
import E from "wangeditor";

export default {
  name: "ContentUpdate",
  data () {
    return {
      editor: null,
      content: {
        id: null,
        section: null,
        subSection: null,
        date: null,
        content: null,
        title: null,
        image: null
      },
      page: {
        uploadShow: true,
        uploadUrl: process.env.VUE_APP_BASE_API + '/image',
        section: null,
        selected: {
          section: null,
          subSection: null
        }
      },
      dialog: {
        video: {
          display: false
        }
      },
      params: this.$route.query
    }
  },
  methods: {
    create () {
      this.content.section =
        this.page.section[this.page.selected.section].section
      this.content.subSection =
        this.page.section[this.page.selected.section].subSection[this.page.selected.subSection]
      this.content.content = this.editor.txt.html()

      this.$refs['content'].validate((valid) => {
        if (valid) {
          create(this.content).then( res => {
            this.content = {
              section: null,
              subSection: null,
              date: null,
              content: null,
              title: null,
              image: null
            }
            this.$router.replace({name: 'ContentList'})
            this.params.id = undefined;
          }).catch( err => {
            console.log(err)
          })
        }
      });
    },
    update () {
      this.content.section =
        this.page.section[this.page.selected.section].section
      this.content.subSection =
        this.page.section[this.page.selected.section].subSection[this.page.selected.subSection]
      this.content.content =
        this.editor.txt.html()

      this.$refs['content'].validate((valid) => {
        if (valid) {
          update(this.content).then( res => {
            this.content = {
              section: null,
              subSection: null,
              date: null,
              content: null,
              title: null,
              image: null
            }
            this.$router.replace({name: 'ContentList'})
            this.params.id = undefined;
          }).catch( err => {
            console.log(err)
          })
        }
      });
    },
    uploadAfter (res) {
      if (res.code === 20000) {
        this.content.image = res.data.url;
        this.page.uploadShow = false;
      } else {
        this.$message.error('图片上传失败')
      }
    }
  },
  mounted() {
    get().then( res => {
      this.page.section = res.data;
      if (this.params.id !== undefined) {
        this.content = this.params;
        this.page.selected.section = this.page.section
          .map(item => item.section)
          .indexOf(this.content.section)
        this.page.selected.subSection = this.page.section[this.page.selected.section]
          .subSection.indexOf(this.content.subSection)
        this.content = this.params
        this.editor.txt.html(this.content.content)
      } else {
        this.content = {
          section: null,
          subSection: null,
          date: null,
          content: null,
          title: null,
          image: null
        }
      }
    })
    this.editor = new E(this.$refs.toobar,this.$refs.editor) 
    this.editor.config.uploadImgShowBase64 = true
    this.editor.create()
  }
}
</script>

<style scoped>
.w-e-text {
    height: 700px !important;
}
.editor{
    max-height:1400px;
    height: 700px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/
    min-height: 700px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/

}
.w-e-text-container{
    max-height:1400px;
    height: 700px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/
}
.editor-bar {
    border:1px solid #c9d8db;
    border-bottom:1px solid #c9d8db;
}
.editor-content {
    height:800px;
    border:1px solid #c9d8db;
    border-top: none;
    min-height:800px;
}
</style>
